<template>
  <div class="activity-admin-wrapper">
    <div class="wrapper-bg"></div>
    <div class="wrapper-mask">
      <div class="wrapper-sidebar">
        <div class="sidebar-menu">
          <div
            class="sidebar-item"
            v-for="(item, index) in sidebar"
            :key="index"
            :class="{ active: item.type === currentType }"
            @click="changeCurrentMenu(item)"
          >
            <van-icon :size="32" :name="item.icon" />
            <div class="text">{{ item.title }}</div>
          </div>
        </div>
        <template v-if="userStore.authInfo">
          <div class="sidebar-user">
            <div class="avatar">
              <van-image round width="40" height="40" fit="contain" :src="adminIcon" />
            </div>
          </div>
          <div class="user-info">
            <el-tag>管理员</el-tag>
          </div>
          <div class="user-info" style="margin-bottom: 15px">
            <el-link type="danger" style="font-size: 12px; margin-top: 5px" @click="logout">退出</el-link>
          </div>
        </template>
      </div>
      <div class="wrapper-container">
        <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showApplyReview'">
            <ApplyReview />
          </div>
        </transition>
         
        <!-- <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showMy'">
            <ApplyRecordList />
          </div>
        </transition> -->
        <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showTask'">
            <TaskReview />
          </div>
        </transition>
        <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showToday'">
            <TodayTaskReview />
          </div>
        </transition>
        <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showOverdue'">
            <OverdueTaskReview />
          </div>
        </transition>
        <transition
          enter-active-class="animate__animated animate__fadeInRight animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <div class="wrapper-item" v-if="currentType === 'showUserManager'">
            <UserManager />
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import './style/admin.less';
</style>
<script lang="ts" setup>
import * as Vue from 'vue'
import { useRouter } from 'vue-router'

//   import ProductList from './components/ProductList.vue'
import ApplyReview from './components/ApplyReview.vue'
import TaskReview from './components/TaskReview.vue'
import TodayTaskReview from './components/TodayTaskReview.vue'
import OverdueTaskReview from './components/OverdueTaskReview.vue'
import UserManager from './components/UserManager.vue'
import { useUserStore } from '@/stores/useStore'
import adminIcon from '@/assets/images/icon-admin.png'


type MenuType = 'showApplyReview' | 'showTask' | 'showToday' | 'showOverdue' | 'showUserManager'

const router = useRouter()
const userStore = useUserStore()

const currentType = Vue.ref<MenuType>()
const sidebarList: Array<{ type: MenuType; title: string; icon: string }> = [
  { type: 'showApplyReview', title: '审核', icon: 'chart-trending-o' },
  { type: 'showTask', title: '日历', icon: 'comment-o' },
  { type: 'showToday', title: '待办', icon: 'question-o' },
  { type: 'showOverdue', title: '待管', icon: 'warning-o' },
  { type: 'showUserManager', title: '用户', icon: 'manager-o' }
]
const sidebar = Vue.computed(() => {
  const config = {
    showApplyReview: true,
    showMy: true,
    showToday: true,
    showTask: true,
    showOverdue: true,
    showUserManager: true,
  }
  if (!config) return []
  // 根据 config 中的配置项来过滤菜单项
  return sidebarList.filter((item) => config[item.type] === true)
})

const changeCurrentMenu = (item: any) => {
  if (item.type === 'showMy' || item.type === 'showTask') {
    const authToken = userStore.getAuthToken()
    if (!authToken) {
      router.replace({ name: 'AdminLogin' })
      return
    }
  }

  currentType.value = item.type
}

Vue.onBeforeMount(async () => {
  const authToken = userStore.getAuthToken()
  if (authToken) {
    await userStore.getAdminAccountInfo()
  } else {
    router.replace({ name: 'AdminLogin' })
  }
  const visibleSidebar = sidebar.value
  if (visibleSidebar.length > 0) {
    currentType.value = visibleSidebar[0].type // 默认选择第一个显示的模块
  }
})

function logout() {
  showConfirmDialog({ title: '提示', message: '确认要退出账号吗？' }).then(() => {
    const cookie = document.cookie
    if (cookie) {
      cookie.split(';').forEach((cookie) => {
        const [name] = cookie.split('=')
        document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
      })
    }
    userStore.userLogout()
    router.replace({ name: 'AdminLogin' })
  })
}
</script>
